<script setup lang="ts">
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridProps } from 'vxe-table'

import { useDelMenu, useGetMenuList } from '@fl/api/iam-api/menu'
import { SearchForm, SearchTable } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'
import { reactive, ref } from 'vue'

import AddOrEditMenu from './components/add-or-edit-menu.vue'
import { useDicts } from './hooks/dict'

const { dicts, getDictLabel } = useDicts()
const { createConfirmModal, createMessage } = useMessage()
const tableRef = ref()
const dialogVisible = ref(false)
const dialogTitle = ref('添加菜单')
const isExpandAll = ref(false)

type IState = {
    menuName: string
    status: string
}
const initialState = {
    menuName: '',
    status: '',
}
const state = ref<IState>(cloneDeep(initialState))
const param = computed(() => ({
    ...state.value,
}))

const { data, isLoading } = useGetMenuList(param)
const { mutate } = useDelMenu()
const records = ref()
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value)
    }
})
// 搜索
function submit(values) {
    state.value = { ...values }
}
function reset() {
    state.value = cloneDeep(initialState)
}
const columns: PlusColumn[] = [
    {
        label: '操作地址',
        prop: 'menuName',
    },
    {
        label: '状态',
        options: dicts.menuStatusOption,
        prop: 'status',
        valueType: 'select',
    },
]
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'menuName', title: '菜单名称', treeNode: true, minWidth: 120 },
        { field: 'icon', title: '图标' },
        { field: 'orderNum', title: '排序' },
        { field: 'perms', title: '权限标识' },
        { field: 'component', title: '组件路径' },
        { field: 'status', slots: { default: 'status' }, title: '状态' },
        { field: 'createTime', title: '创建时间', minWidth: 80 },
        { slots: { default: 'operate' }, title: '操作', width: 240 },
    ],
    treeConfig: {
        parentField: 'parentId',
        rowField: 'menuId',
        transform: true,
    },
})
const parentId = ref(0)
const menuId = ref()
function fold() {
    isExpandAll.value = !isExpandAll.value
    const $table = tableRef.value?.tableInstance
    if (!isExpandAll.value) {
        $table.clearTreeExpand()
    }
    else {
        $table.setAllTreeExpand(true)
    }
}
function add(row) {
    if (row != null && row.menuId) {
        parentId.value = row.menuId
    }
    else {
        parentId.value = 0
    }
    dialogVisible.value = true
    dialogTitle.value = '添加菜单'
}
function edit(row) {
    menuId.value = row.menuId
    dialogVisible.value = true
    dialogTitle.value = '修改菜单'
}
function del(row) {
    createConfirmModal({
        content: '是否确认删除？',
        onError: () => {
            console.log('操作取消！')
        },
        onSuccess: () => {
            mutate(row.menuId, {
                onSuccess: () => {
                    createMessage.success('删除成功')
                },
            })
        },
    })
}
</script>

<template>
    <ElCard class="mb-20"
            shadow="never"
    >
        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="搜索"
                    @reset="reset"
                    @submit="submit"
        />
    </ElCard>

    <ElCard shadow="never">
        <SearchTable ref="tableRef"
                     v-bind="gridOptions"
                     :loading="isLoading"
                     :data="records"
        >
            <template #toolbar_buttons>
                <ElButton type="primary"
                          @click="add"
                >
                    新增
                </ElButton>

                <ElButton @click="fold">
                    展开/折叠
                </ElButton>
            </template>

            <template #status="{ row }">
                <el-tag :type="row.status == 0 ? 'primary' : 'warning'">
                    {{ getDictLabel("menuStatusOption", row.status) }}
                </el-tag>
            </template>

            <template #operate="{ row }">
                <el-button text
                           type="primary"
                           @click="edit(row)"
                >
                    修改
                </el-button>

                <el-button text
                           type="primary"
                           @click="add(row)"
                >
                    新增
                </el-button>

                <el-button text
                           @click="del(row)"
                >
                    删除
                </el-button>
            </template>
        </SearchTable>
    </ElCard>

    <el-dialog v-model="dialogVisible"
               :title="dialogTitle"
               width="800"
    >
        <AddOrEditMenu v-model:visible="dialogVisible"
                       v-model:menuId="menuId"
                       :tree-data="records"
                       :parent-id="parentId"
        />
    </el-dialog>
</template>
